<template>
  <div
    class="site-wrapper"
    :class="{ 'site-sidebar--fold': sidebarFold }"
    v-loading.fullscreen.lock="loading"
    element-loading-text="拼命加载中">
    <template v-if="!loading">
      <main-navbar />
      <main-sidebar />
      <div class="site-content__wrapper" :style="{ 'min-height': documentClientHeight + 'px' }">
        <main-content />
        <Theme />
      </div>
    </template>
  </div>
</template>

<script>
  // navbar 顶部导航条
  import MainNavbar from './main-navbar'
  // 侧边导航条
  import MainSidebar from './main-sidebar'
  import MainContent from './main-content'
  import Theme from '@/views/common/theme'
  export default {
    data () {
      return {
        loading: true
      }
    },
    components: {
      MainNavbar,
      MainSidebar,
      MainContent,
      Theme
    },
    computed: {
      documentClientHeight: {
        get () { return this.$store.state.common.documentClientHeight },
        set (val) { this.$store.commit('common/updateDocumentClientHeight', val) }
      },
      sidebarFold: {
        get () { return this.$store.state.common.sidebarFold }
      },
      userId: {
        get () { return this.$store.state.user.id },
        set (val) { this.$store.commit('user/updateId', val) }
      },
      userName: {
        get () { return this.$store.state.user.name },
        set (val) { this.$store.commit('user/updateName', val) }
      },
      nickName: {
        get () { return this.$store.state.user.nickname },
        set (val) { this.$store.commit('user/nickname', val) }
      },
      avatar: {
        get () { return this.$store.state.user.avatar },
        set (val) { this.$store.commit('user/avatar', val) }
      }
    },
    created () {
      this.getUserInfo()
    },
    mounted () {
      this.resetDocumentClientHeight()
    },
    methods: {
      // 重置窗口可视高度
      resetDocumentClientHeight () {
        this.documentClientHeight = document.documentElement['clientHeight']
        window.onresize = () => {
          this.documentClientHeight = document.documentElement['clientHeight']
        }
      },
      // 获取当前管理员信息
      getUserInfo () {
        this.$http({
          // url: this.$http.adornUrl('/sys/user/info'),
          url: 'clientauth/user/info',
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          // 把用户信息存到localStorage中
          //localStorage.setItem('user', JSON.stringify(data));
          if (data && data.code === 0) {
            this.loading = false
            this.userId = data.data.sysUser.userId
            // 把用户id存到store中
            this.$store.commit('user/updateName',this.userId)
            sessionStorage.setItem('permissions', JSON.stringify(data.data.permissions || '[]'))
            this.userName = data.data.sysUser.username
            this.nickName = data.data.sysUser.nickName
            this.avatar = data.data.sysUser.avatar
          }
        }).then(() =>{
          this.$http({
          // 根据id获取该用户的社区id
          url: '/dg-ic/ic/sys/user/getbydguserId/' + this.userId,
          method: 'get'
        }).then(({data}) => {
          // 把用户信息存到localStorage中
          //localStorage.setItem('user', JSON.stringify(data));
          if (data && data.code === 0 && data.data !== null) {
            this.loading = false
            // 把用户社区id存到store中
            // this.$store.commit('user/communityId',data.data.communityId)
            sessionStorage.setItem('thiscommunityId', data.data.housingEstateId)
            sessionStorage.setItem('superAdmin', data.data.superAdmin)
            sessionStorage.setItem('userId', data.data.id)
            this.$store.commit('user/userId',data.data.id)
          }else{
            sessionStorage.setItem('thiscommunityId','')
            sessionStorage.setItem('superAdmin', '1')
            // this.$store.commit('user/communityId',"")
          }
        })

        })
      }
    }
  }
</script>

<style lang="scss">
  .site-content__wrapper {
    overflow: hidden;
  }
  /* Reset element-ui table的表头样式
  ------------------------------ */
  .site-wrapper .el-table th {
    color:#303133;
    background-color:#f5f7fa
  }
  // 解决右侧出现滚动条的问题
  // .site-content--tabs {
  //   padding: 30px 0 0;
  // }
</style>
